<template>
    <div class="con">
        <div class="info1">
            <dl>
                <dd>姓名</dd>
                <dt>
                    <p>{{accountName}}</p>
                </dt>
            </dl>
            <dl>
                <dd>身份证号</dd>
                <dt>
                    <p>{{idNumber}}</p>
                </dt>
            </dl>
            <dl>
                <dd>用户等级</dd>
                <dt>
                    <p>普通用户</p>
                </dt>
            </dl>
        </div>
        <div class="info1" style="margin-top:14px">
            <dl @click="updatephone()">
                <dd>登录手机号</dd>
                <dt>
                    <p style="margin-right:14px">{{phone}}</p>
                    <img src="../../assets/images/more.png" alt class="more">
                </dt>
            </dl>
            <dl @click="updatepwd()">
                <dd>修改密码</dd>
                <dt>
                    <img src="../../assets/images/more.png" alt class="more">
                </dt>
            </dl>
        </div>
    </div>
</template>

<script>
export default {
    name: "personInfo",
    data() {
        return {
            accountName: "",
            idNumber: "",
            phone: "",
            timestamp: ""
        };
    },
    methods: {
        updatephone() {
            this.$router.push({ name: "updatephone" });
        },
        updatepwd() {
            this.$router.push({ name: "updateloginpwd" });
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());

        this.accountName = localStorage.getItem("accountName");
        this.phone = localStorage.getItem("loginphone");
        this.idNumber = localStorage.getItem("idNumber");
        // 过滤身份证带*号
        this.idNumber = `${this.idNumber.substring(
            0,
            6
        )}****${this.idNumber.substring(this.idNumber.length - 4)}`;
        this.phone = `${this.phone.substring(0, 3)}****${this.phone.substring(
            this.phone.length - 3
        )}`;
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #f9f9f9;
    overflow: hidden;
}

.con .info1 {
    background: #fff;
}

.con .info1 dl {
    height: 60px;
    border-bottom: 1px solid #ececec;
    width: 90%;
    margin-left: 5%;
    margin-top: 24px;
}
.con .info1 dl:last-child {
    border: none;
}
.con .info1 dd {
    line-height: 60px;
    color: #2d3659;
    font-weight: 200;
    float: left;
}
.con .info1 dt {
    float: right;
    width: 200px;
    height: 60px;
    line-height: 60px;
    position: relative;
    text-align: right;
    color: #2d3659;
}
.con .info1 span {
    position: absolute;
    right: -10px;
    top: 0px;
    color: #ffae4e;
}

.con .info1 dt input {
    text-align: right;
    width: 200px;
}
.info1 .more {
    position: absolute;
    right: 2px;
    top: 25px;
    width: 6px;
}
</style>
